<template>
    <div>
        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <i class="el-icon-arrow-left" @click="goback">返回上一级</i>
        </div>
        <div class="app-container">
            <el-card class="operate-container" shadow="never">
                <i class="el-icon-tickets" style="margin-top: 5px"></i>
                <span style="margin-top: 5px">数据列表</span>
                <el-button
                        class="btn-add"
                        @click="handleAddProductCate()"
                        size="mini">
                    添加
                </el-button>
            </el-card>
            <div class="table-container">
                <el-table ref="productCateTable"
                          style="width: 100%"
                          :data="list"
                          v-loading="listLoading" border>
                    <el-table-column label="编号" width="100" align="center" prop="id">
                        <template slot-scope="scope">{{scope.row.id}}</template>
                    </el-table-column>
                    <el-table-column label="类别编号" width="100" align="center" prop="cateid">
                        <template slot-scope="scope">{{scope.row.cateid}}</template>
                    </el-table-column>
                    <el-table-column label="商品图片" width="120" align="center" prop="pic">
                        <template slot-scope="scope"><img style="width: 100%" :src="scope.row.pic"></template>
                    </el-table-column>
                    <el-table-column label="分类名称" align="center" prop="name">
                        <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>
                    <el-table-column label="级别" width="100" align="center"><!---{{scope.row.level | levelFilter}}-->
                        <template slot-scope="scope">二级</template>
                    </el-table-column>
                    <el-table-column label="废弃/在线" width="100" align="center" >
                        <template slot-scope="scope">
                            <el-switch
                                    @change="handleNavStatusChange(scope.row.cateid)"
                                    v-model="InOrUnline">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" width="100" align="center" prop="sort">
                        <template slot-scope="scope">{{scope.row.sort }}</template>
                    </el-table-column>
                    <el-table-column label="设置" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleShowNextLevel(scope.$index, scope.row)"
                                    disabled>查看下级
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" prop="cateid">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleUpdate(scope.row.cateid)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row.cateid)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery.pageSize"
                        :page-sizes="[5,10,15]"
                        :current-page.sync="listQuery.pageNum"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="topin"></div>
    </div>
</template>

<script>
    export default {
        name: "CategoryChildList",
        data(){
            return {
                InOrUnline:true,
                status:'',
                list:[],
                total: null,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 5
                },
                parentId: 0
            }
        },
        created() {
            this.getList();
        },
        methods:{
            getList() {
                this.listLoading = true;
                this.service.get("/product/manage/category/"+this.$route.params.categoryId,{
                    params:{
                        pageNum:this.listQuery.pageNum,
                        pageSize:this.listQuery.pageSize
                    }
                }).then(res=>{
                   //console.log(res.data);
                    this.listLoading = false;
                    this.total=res.data.data.total;
                    this.list=[];
                    if (res.data.status==0){
                        for (var i=0;i<res.data.data.list.length;i++){
                            let category={
                                id:'',
                                cateid:'',
                                name:'',
                                pic:'',
                                showStatus:'',
                                sort:''
                            };
                            category.id=i+1;
                            category.cateid=res.data.data.list[i].id;
                            category.name=res.data.data.list[i].name;
                            category.pic = res.data.data.list[i].mainImage;
                            category.showStatus=res.data.data.list[i].status;
                            this.InOrUnline=res.data.data.list[i].status;
                            category.sort=res.data.data.list[i].sortOrder;
                            this.list.push(category);
                        }
                    }
                })
            },
            handleAddProductCate() {
                this.$router.push({name:'添加商品分类'});
            },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            //删除类别信息
            handleDelete(categoryId) {
                this.$confirm('是否要删除该品牌', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/category/deleteCategory.do",{params:{categoryId:categoryId}}).then(response => {
                        if (response.data.status==0){
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000
                            });
                            /*this.reload();*/
                            this.$router.go(0);
                        }else{
                            this.$message.error('删除失败');
                        }

                        this.getList();
                    });
                });
            },
            handleNavStatusChange(categoryId) {
                this.InOrUnline = !this.InOrUnline;
                //console.log(this.InOrUnline);
                if (this.InOrUnline == true ){
                    this.status = 1;
                }else{
                    this.status = 0;
                }
                this.service.get("/product/manage/category/updatastatus.do",{
                    params:{
                        categoryId:categoryId,
                        status:this.status
                    }
                }).then(res=>{
                    if (res.data.data=='成功'){
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration: 1000
                        });
                    } else{
                        this.$message.error('修改失败');
                    }
                })
            },
            handleShowNextLevel(categoryId) {
                this.$router.push({name: '商品分类子类', params: {categoryId: categoryId}})
            },
            handleUpdate(categoryId) {
                this.$router.push({
                    name:'修改商品分类信息',
                    params:{
                        categoryId:categoryId
                    }
                });
            },
            goback(){
                this.$router.go(-1);
            }
        }

    }
</script>

<style scoped>
    .el-pagination{
        float: right;
    }
    .batch-operate-container{
        float: left;

    }
    .topin{
        height:25px
    }
</style>